<template>
  <div class="menu-container">
    <el-card>
      <el-row type="flex" justify="end" style="margin-bottom: 10px">
        <el-button type="primary" plain @click="clickFn">创建菜单</el-button>
      </el-row>
      <el-table
        :data="menuList"
        border
        row-key="id"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column
          label="菜单名称"
          prop="permission_name"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="菜单地址"
          prop="route"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="权限标识"
          prop="permission_mark"
          width="200px"
        ></el-table-column>
        <el-table-column label="图标" width="70px">
          <template slot-scope="{ row }">
            <svg-icon v-if="row.icon" :icon-class="row.icon" />
          </template>
        </el-table-column>
        <el-table-column
          label="组件路径"
          prop="component"
          width="200px"
        ></el-table-column>
        <el-table-column label="是否显示" width="200px">
          <template slot-scope="{ row }">
            <el-switch
              @change="change_status(row.id, $event)"
              v-model="row.hidden"
              :active-value="1"
              :inactive-value="2"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="created_at"
          width="300px"
        ></el-table-column>

        <el-table-column label="操作" fixed="right" width="180px">
          <template slot-scope="{ row }">
            <el-button
              circle
              size="small"
              icon="el-icon-edit"
              type="primary"
              @click="editHandler(row)"
            ></el-button>
            <el-button
              circle
              size="small"
              icon="el-icon-plus"
              type="warning"
              @click="addHandler(row.id)"
            ></el-button>
            <el-button
              circle
              size="small"
              icon="el-icon-delete"
              type="danger"
              @click="delHandler(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddMenu ref="addMenu" @updateList="updateList" />
  </div>
</template>

<script>
import { getMenuListApi, setIsShowApi, delMenuApi } from '@/api/menu'
import { transToTree } from '@/utils/index'
import AddMenu from './components/addMenu.vue'
export default {
  name: 'Menu',
  components: {
    AddMenu,
  },
  data() {
    return {
      menuList: [],
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      let res = await getMenuListApi()
      console.log(res)
      this.menuList = transToTree(res, 0)
      console.log(this.menuList)
    },
    // 是否显示切换
    async change_status(id, state) {
      // console.log(id, state)
      await setIsShowApi(id, state)
      this.$message.success('修改成功')
    },
    async delHandler(id) {
      await this.$confirm('确认删除吗？')
      await delMenuApi(id)
      this.$message.success('删除成功')
      this.initData()
    },
    // 点击创建菜单事件
    clickFn() {
      this.$refs.addMenu.showDialog = true
    },
    // 点击编辑事件
    editHandler(val) {
      // console.log(val)
      this.$refs.addMenu.formData = val
      this.$refs.addMenu.showDialog = true
    },
    // 点击加号事件
    addHandler(id) {
      // console.log(id)
      this.$refs.addMenu.formData.parent_id = id
      this.$refs.addMenu.showDialog = true
    },
    async updateList() {
      this.initData()
      let { permission_menu_list } = await this.$store.dispatch('user/getInfo') //重新获取用户资料
      this.$store.dispatch('permission/filterRoutes', permission_menu_list)
    },
  },
}
</script>
<style lang="scss" scoped>
.menu-container {
  background-color: #eaedf1;
  padding: 20px;
}
</style>
